<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码示例</title>
</head>

<body>
    <hr>
    直接返回验证码图片
    <hr>
    <div>
        <img id="image">
        <button onclick="fetchVerificationCode()">获取验证码</button>
    </div>
    <hr>
    通过base64
    <hr>
    <div>
        <img id="image1">
        <button onclick="refreshVerificationCode()">刷新验证码</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        function fetchVerificationCode() {
            axios.get('http://localhost:8080/image', { responseType: 'arraybuffer' })
                .then(function (response) {
                    var imageElement = document.getElementById('image');
                    var blob = new Blob([response.data], { type: 'image/png' });
                    var imageUrl = URL.createObjectURL(blob);
                    imageElement.src = imageUrl;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }

        function refreshVerificationCode() {
            axios.get('http://localhost:8080/image1')
                .then(function (response) {
                    var imageElement = document.getElementById('image1');
                    imageElement.src = "data:image/png;base64," + response.data.image;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
</body>

</html>